<template>
  <div class="app-container">
    <div >
      <div v-if="total>0">
      <el-button type="primary" @click="deleteAll">清空</el-button>
      <el-button type="primary" @click="redAll">全部已读</el-button>
      </div>
      <el-row :gutter="24">
        <el-col :span="24" :xs="24">
          <el-card >
              <div class="user-activity">
                <div v-if="total<=0">
                  你还没有收到消息哦！
                </div>
                <div v-if="total>0">
                  <div  v-for="(item) in notifyList" :key="item.notifyId" :offset="1">
                    <el-card shadow="hover" v-if="item.notifyType === 5" @mouseenter.native="enterType = item.notifyId" @mouseleave.native="enterType = ''">
                          <div class="post">
                            <div class="user-block">
                              <el-badge is-dot :hidden ="item.readeType===0?false:true" class="item">
                              <img class="img-circle" :src="item.senfAvatar">
                              </el-badge>
                              <span class="username text-muted">{{item.sendUserName}}</span>
                              <span class="description">提醒 - 2021-03-30 12:00:00</span>
                            </div>
                            <el-row :gutter="20">
                              <el-col :span="14">
                                <div>
                                <p>
                                  {{item.content}}
                                </p>
                                </div>
                              </el-col>
                              <el-col :span="6">
                                <div v-if="enterType===item.notifyId">
                                  <el-button type="text" @click="redNotify(item)">已读</el-button>
                                  <el-button v-if="item.contentUrl!==undefined&&item.contentUrl!==''" type="text" @click="toNotifyDetail(item)">下载</el-button>
                                  <el-button type="text" @click="deleteNotify(item)">删除</el-button>
                                </div>
                              </el-col>
                            </el-row>
                          </div>
                    </el-card>
                    <el-card shadow="hover" v-if="item.notifyType === 4" @mouseenter.native="enterType = item.notifyId" @mouseleave.native="enterType = ''">
                          <div class="post">
                            <div class="user-block">
                              <el-badge is-dot :hidden ="item.readeType===0?false:true" class="item">
                              <img class="img-circle" :src="item.senfAvatar">
                              </el-badge>
                              <span class="username text-muted">{{item.sendUserName}}</span>
                              <span class="description">提醒 - 2021-03-30 12:00:00</span>
                            </div>
                            <el-row :gutter="20">
                              <el-col :span="14">
                                <div>
                                <p>
                                  {{item.content}}
                                </p>
                                </div>
                              </el-col>
                              <el-col :span="6">
                                <div v-if="enterType===item.notifyId">
                                  <el-button type="text" @click="redNotify(item)">已读</el-button>
                                  <el-button v-if="item.contentUrl!==undefined&&item.contentUrl!==''" type="text" @click="toNotifyDetail(item)">下载</el-button>
                                  <el-button type="text" @click="deleteNotify(item)">删除</el-button>
                                </div>
                              </el-col>
                            </el-row>
                          </div>
                    </el-card>
                    <el-card shadow="hover" v-if="item.notifyType === 3" @mouseenter.native="enterType = item.notifyId" @mouseleave.native="enterType = ''">
                          <div class="post">
                            <div class="user-block">
                              <el-badge is-dot :hidden ="item.readeType===0?false:true" class="item">
                              <img class="img-circle" :src="item.senfAvatar">
                              </el-badge>
                              <span class="username text-muted">{{item.sendUserName}}</span>
                              <span class="description">信息 - 2021-03-30 12:00:00</span>
                            </div>
                            <el-row :gutter="20">
                              <el-col :span="14">
                                <div>
                                <p>
                                  {{item.content}}
                                </p>
                                </div>
                              </el-col>
                              <el-col :span="6">
                                <div v-if="enterType===item.notifyId">
                                  <el-button type="text" @click="redNotify(item)">已读</el-button>
                                  <el-button type="text" @click="toNotifyDetail(item)">详情</el-button>
                                  <el-button type="text" @click="deleteNotify(item)">删除</el-button>
                                </div>
                              </el-col>
                            </el-row>
                          </div>
                    </el-card>
                      <el-card shadow="hover"  v-if="item.notifyType === 2" @mouseenter.native="enterType = item.notifyId" @mouseleave.native="enterType = ''">
                          <div class="post">
                            <div class="user-block">
                              <el-badge is-dot :hidden ="item.readeType===0?false:true" class="item">
                              <img class="img-circle" :src="item.senfAvatar">
                              </el-badge>
                              <div>
                              <span class="username text-muted">{{item.sendUserName}}</span>
                              <span class="description">提醒 - 7:30 PM today</span>
                              </div>
                            </div>
                            <el-row :gutter="20">
                              <el-col :span="14">
                              <div>
                              <p>
                                {{item.content}}
                              </p>
                              </div>
                              </el-col>
                              <el-col :span="6">
                              <div v-if="enterType===item.notifyId">
                                <el-button type="text" @click="redNotify(item)">已读</el-button>
                                <el-button type="text" @click="toNotifyDetail(item)">详情</el-button>
                                <el-button type="text" @click="deleteNotify(item)">删除</el-button>
                              </div>
                              </el-col>
                            </el-row>
                            </div>
                      </el-card>
                      <el-card shadow="hover" v-if="item.notifyType === 1" @mouseenter.native="enterType = item.notifyId" @mouseleave.native="enterType = ''">
                      <div class="post">
                        <div class="user-block" >
                          <el-badge is-dot :hidden ="item.readeType===0?false:true" class="item">
                          <img class="img-circle" :src="item.senfAvatar">
                          </el-badge>
                          <div>
                          <span class="username text-muted">{{item.sendUserName}}</span>
                          <span class="description">提醒 - 2021-03-30 12:00:00</span>
                          </div>
                        </div>
                        <el-row :gutter="20">
                          <el-col :span="14">
                        <div>
                        <p>
                          {{item.content}}
                        </p>
                        </div>
                          </el-col>
                        <el-col :span="6">
                        <div v-if="enterType===item.notifyId" >
                          <el-button type="text" @click="redNotify(item)">已读</el-button>
                          <el-button type="text" @click="toNotifyDetail(item)">详情</el-button>
                          <el-button type="text" @click="deleteNotify(item)">删除</el-button>
                        </div>
                        </el-col>
                        </el-row>
                      </div>
                      </el-card>
                        <el-card shadow="hover" v-if="item.notifyType === 0" @mouseenter.native="enterType = item.notifyId" @mouseleave.native="enterType = ''">
                          <div class="post">
                            <div class="user-block">
                              <el-badge is-dot :hidden ="item.readeType===0?false:true" class="item">
                              <img class="img-circle" :src="item.senfAvatar">
                              </el-badge>
                              <span class="username text-muted">{{item.sendUserName}}</span>
                              <span class="description">通知 - 2021-03-30 12:00:00</span>
                            </div>
                            <el-row :gutter="20">
                              <el-col :span="14">
                                <div>
                                <p>
                                  {{item.content}}
                                </p>
                                </div>
                              </el-col>
                              <el-col :span="6">
                                <div v-if="enterType===item.notifyId">
                                  <el-button type="text" @click="redNotify(item)">已读</el-button>
                                  
                                  <el-button type="text" @click="deleteNotify(item)">删除</el-button>
                                </div>
                              </el-col>
                            </el-row>
                          </div>
                        </el-card>
                  </div>
                </div>
              </div>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
const avatarPrefix = '?imageView2/1/w/80/h/80'
const carouselPrefix = '?imageView2/2/h/440'
import { getNotifyList,redNotify,deleteNotify,deleteAll,redAll} from '@/api/notify'
export default {
  data() {
    return {
      avatarPrefix,
      carouselPrefix,
      notifyParams:{
        notifyId:''
      },
      notifyList:[],
      enterType:'',
      total:0
    }
  },
  //页面打开时执行的方法
  created() {
    this.getNotifyList()
  },
  methods:{
    async getNotifyList(){
      let res = await getNotifyList(this.notifyParams);
      this.notifyList = res.beans;
      this.total = res.bean.total;
    },
      //消息已读
      async redNotify(item){
        this.notifyParams.notifyId = item.notifyId
        redNotify(this.notifyParams).then(()=>{
            this.$message({
              type: 'success',
              message: '已读成功!'
            })
            this.getNotifyList()
            this.$store.state.user.notifyNum = this.$store.state.user.notifyNum>1?this.$store.state.user.notifyNum-1:0
            }
          ).catch(err=>{
            this.$message({
              type: 'error',
              message: '已读失败!'
            })
            })
    },
    //删除消息
    async deleteNotify(item){
       this.notifyParams.notifyId = item.notifyId
        deleteNotify(this.notifyParams).then(()=>{
            this.$message({
              type: 'success',
              message: '删除消息成功!'
            })
            this.getNotifyList()
            this.$store.state.user.notifyNum = this.$store.state.user.notifyNum>1?this.$store.state.user.notifyNum-1:0
            }
          ).catch(err=>{
            this.$message({
              type: 'error',
              message: '删除消息失败!'
            })
            })
    },
    //消息详情
    async toNotifyDetail(item){
      //标记消息已读
      this.notifyParams.notifyId = item.notifyId
      redNotify(this.notifyParams)
      //跳转消息详情
      if(item.notifyType===1){//实训单位提醒
         this.$router.push({
          path: "/companyDetail",
          query:{
            companyId:item.internshipId
          }
          })
      }else if(item.notifyType===2){//报告提醒
      if(this.$store.state.user.userType===1){//教师
          this.$router.push({
            path: "/verifyReportDetail",
            query:{
              reportId:item.reportId,
              studentAccount:item.sendAccount
            }
            })
      }else if(this.$store.state.user.userType===2){//学生
          this.$router.push({
            path: "/reportDetail",
            query:{
              reportId:item.reportId
            }
            })
      }
      }else if(item.notifyType===3){//私信
        this.$router.push({
          path: "/notify/chat",
          query:{
            userAccount:item.sendAccount
          }
          })
      }else if(item.notifyType===4){//导出提醒
       window.location.href = item.contentUrl;
      }else if(item.notifyType===5){//实训单位审核提醒
        this.$router.push({
              path: "/verifyCompanyDetail",
              query:{
                companyId:item.internshipId
              }
              })
      }
    },
    //清空
    async deleteAll(){
        deleteAll(this.notifyParams).then(()=>{
            this.$message({
              type: 'success',
              message: '清空消息成功!'
            })
            this.getNotifyList()
            this.$store.state.user.notifyNum = 0
            }
          ).catch(err=>{
            this.$message({
              type: 'error',
              message: '清空消息失败!'
            })
            })
    },
    //全部已读
    async redAll(){
        redAll(this.notifyParams).then(()=>{
            this.$message({
              type: 'success',
              message: '全部已读成功!'
            })
            this.getNotifyList()
            this.$store.state.user.notifyNum = 0
            }
          ).catch(err=>{
            this.$message({
              type: 'error',
              message: '全部已读失败!'
            })
            })
    },
  },
 
}
</script>

<style lang="scss" scoped>
.user-activity {
  .user-block {

    .username,
    .description {
      display: block;
      margin-left: 50px;
      padding: 2px 0;
    }

    .username{
      font-size: 16px;
      color: #000;
    }

    :after {
      clear: both;
    }
    .item{
      
    .img-circle {
          border-radius: 50%;
          width: 40px;
          height: 40px;
          float: left;
    }
    }

    span {
      font-weight: 500;
      font-size: 12px;
    }
  }

  .post {
    font-size: 14px;
    border-bottom: 1px solid #d2d6de;
    margin-bottom: 15px;
    padding-bottom: 15px;
    color: #666;

    .image {
      width: 100%;
      height: 100%;

    }

    .user-images {
      padding-top: 20px;
    }
  }
  .list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;

    li {
      display: inline-block;
      padding-right: 5px;
      padding-left: 5px;
      font-size: 13px;
    }

    .link-black {

      &:hover,
      &:focus {
        color: #999;
      }
    }
  }

}

.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}
</style>
